<template>
	<div id="pwd">
		<p>
			<el-icon style="color: blue;">
				<Notebook />
			</el-icon>
			<strong>更改密码</strong>
		</p>
		<div>
			<el-form :model="upDate" status-icon :rules="rules" ref="upDateform" label-width="100px"
				class="demo-ruleForm">
				<el-form-item label="旧密码" prop="oldPassword" required>
					<el-input type="password" v-model="upDate.oldPassword" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="新密码" prop="newPassword" required>
					<el-input type="password" v-model="upDate.newPassword" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="新确认密码" prop="confirmPassword" required>
					<el-input type="password" v-model="upDate.confirmPassword" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item>
					<!-- 将参数修改为 'upDateform' -->
					<el-button type="primary" @click="submitForm('upDateform')">确认修改</el-button>
				</el-form-item>
			</el-form>
		</div>

	</div>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		ElMessage
	} from 'element-plus';
	import api from '../../api';

	// 定义响应式数据
	const upDate = reactive({
		oldPassword: '',
		newPassword: '',
		confirmPassword: ''
	});

	// 定义验证函数
	const validateOldPassword = (rule, value, callback) => {
		if (value === '') {
			callback(new Error('请输入原始密码'));
		} else {
			callback();
		}
	};

	const validateNewPassword = (rule, value, callback) => {
		if (value === '') {
			callback(new Error('请输入新密码'));
		} else {
			callback();
		}
	};

	const validateConfirmPassword = (rule, value, callback) => {
		if (value === '') {
			callback(new Error('请再次输入新密码'));
		} else {
			if (value !== upDate.newPassword) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		}
	};

	// 定义验证规则
	const rules = {
		oldPassword: [{
			validator: validateOldPassword,
			trigger: 'blur'
		}],
		newPassword: [{
			validator: validateNewPassword,
			trigger: 'blur'
		}],
		confirmPassword: [{
			validator: validateConfirmPassword,
			trigger: 'blur'
		}]
	};

	// 获取表单引用
	const upDateform = ref(null);

	// 提交表单方法
	const submitForm = (formName) => {
		upDateform.value.validate((valid) => {
			if (valid) {
				const fm = new FormData();
				fm.append('oldPwd', upDate.oldPassword);
				fm.append('newPwd', upDate.newPassword);
				api.postf("api/user/updatePwd", fm).then((resp) => {
					console.dir(resp.data);
					if (resp.data.code === 200) {
						ElMessage.success("修改成功");
						upDate.oldPassword = '';
						upDate.newPassword = '';
						upDate.confirmPassword = '';
					}
				});
			} else {
				console.log('验证失败');
				return false;
			}
		});
	};
</script>

<style lang="less">
	#pwd {
		p:nth-child(1) {
			display: block;
			height: 30px;
			line-height: 30px;
			border-bottom: 2px solid #b3d8ff;
			text-align: center;
			margin-bottom: 20px;
		}

		.demo-ruleForm {
			display: flex;
			flex-direction: column;
			align-items: center;

			.el-input__inner {
				width: 400px;
			}
		}

	}
</style>